<!DOCTYPE html>
<html ng-app="app">

<head>
    <title>省市区三级联动/Angular</title>
    <meta charset=utf-8>
    <meta name=description content="">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .area {
            height: 30px;
            font-size: 16px;
            line-height: 30px;
        }
        
        .area-div {
            margin: 5px;
            float: left;
        }
        
        .area-sel {
            width: 205px;
            border: 1px solid #ADC4D9;
            padding-left: 1em;
        }
    </style>
    <script src="https://cdn.bootcss.com/angular.js/1.5.9/angular.min.js"></script>
    <script src="js/ngArea.js?v=0"></script>
    <script src="js/index1.js?v=0"></script>
</head>

<body ng-controller="pageCtrl">
    <div class="container">

        <h4>自定义样式：</h4>
        <div ng-area province="province" city="city" county="county" class="area" div-class="area-div" sel-class="area-sel" required="false" has-City="true" has-County="true"></div>

        <h4>bootstrap样式：</h4>
        <h5>带区县：</h5>
        <div ng-area province="province" city="city" county="county" div-class="col-md-4" sel-class="form-control" required="false" has-City="true" has-County="true"></div>
        <h5>不带区县：</h5>
        <div ng-area province="province" city="city" county="county" div-class="col-md-6" sel-class="form-control" required="false" has-City="true" has-County="false"></div>
        <p>
            您选择的是：{{province}}
            <span ng-if="city"> - </span>{{city}}
            <span ng-if="county"> - </span>{{county}}
        </p>
        <div class="jumbotron">
            <h3>使用说明</h3>
            <p class="text-info">必要文件：ngArea.js、area.json。注意修改ngArea.js第一行的area.json路径</p>
            <p>页面中引入ngArea.js文件</p>
            <div>
                <p>angular模块注入Area模块：</p>
                <pre>
angular.module('app',['<strong>Area</strong>']).controller(...)
                </pre>
            </div>

            <p style="font-size:20px;"><strong></strong></p>
            <p>html：通过 <strong>ng-area</strong> 指令：属性或者标签创建省市区三级联动下拉选择框</p>
            <div>
                <p>html代码：
                </p>
                <pre>
&lt;div
    ng-area 
    province="province" 
    city="city" 
    county="county" 
    class="area" 
    div-class="area-div" 
    sel-class="area-sel" 
    required="false" 
    has-City="true" 
    has-County="true"&gt;
&lt;/div&gt;
                </pre>

                <p><strong>province、city、county</strong> 属性分别指定需双向绑定的省、市、区模型</p>
                <p><strong>div-class</strong> 指定生成的三个div的css类名</p>
                <p><strong>sel-class</strong> 指定生成的三个div包裹着的select的css类名</p>
                <p><strong>required</strong> 指定下拉框是否必填，默认为false</p>
                <p><strong>has-city</strong> 指定是否显示城市下拉框，默认为true，若该值设为false，则has-county也为false</p>
                <p><strong>has-county</strong> 指定是否显示区县下拉框，默认为true，若has-city设为false，则该值也为false，不需设置</p>
                <p>生成的标签如以下格式：</p>
                <pre>
&lt;div ng-area="" province="province" city="city" county="county" class="area" 
  div-class="area-div" sel-class="area-sel" required="false" has-city="true" has-county="true"&gt;
    &lt;div  class="area-div"&gt;
        &lt;select ng-model="province" required="false" class="area-sel"&gt;
            &lt;option value="" &gt;请选择省份&lt;/option&gt;
            &lt;option label="湖南省" value="湖南省"&gt;湖南省&lt;/option&gt;
            &lt;option label="广东省" value="广东省" selected="selected"&gt;广东省&lt;/option&gt;
        &lt;/select&gt;
     &lt;/div&gt;
     &lt;div  class="area-div"&gt;
        &lt;select ng-model="city" required="false" class="area-sel"&gt;
            &lt;option value="" &gt;请选择城市&lt;/option&gt;
            &lt;option label="广州市" value="广州市" selected="selected"&gt;广州市&lt;/option&gt;
            &lt;option label="韶关市" value="韶关市"&gt;韶关市&lt;/option&gt;
        &lt;/select&gt;
     &lt;/div&gt;
     &lt;div  class="area-div"&gt;
        &lt;select ng-model="county" nrequired="false" class="area-sel"&gt;
            &lt;option value="" &gt;请选择区县&lt;/option&gt;
            &lt;option label="天河区" value="天河区" selected="selected"&gt;天河区&lt;/option&gt;
            &lt;option label="白云区" value="白云区"&gt;白云区&lt;/option&gt;
        &lt;/select&gt;
     &lt;/div&gt;
&lt;/div&gt;
                </pre>
            </div>

        </div>

    </div>




</body>

</html>